<script setup lang="ts">
import { computed } from 'vue';
import { useRouterPush } from '@/composables';

const {
    toHospital,
    toGohome,
    toCompanion,
    toSingleService,
    toShare,
} = useRouterPush()

const pathList = [
    {
        to: toHospital,
        text: '住院陪护',
        icon: 'i-local-hospital-fill'
    },
    {
        to: toGohome,
        text: '居家陪护',
        icon: 'i-local-of-home'
    },
    {
        to: toCompanion,
        text: '就诊陪护',
        icon: 'i-local-companion'
    },
    {
        to: toSingleService,
        text: '单项服务',
        icon: 'i-local-single-service'
    },
    {
        to: toShare,
        text: '共享租赁椅',
        icon: 'i-local-share'
    },

]


const Icon = computed(() => (_icon: string) => `${_icon} w-36px h-36px`)
</script>
<template>
    <view class=" h-full flex flex-row justify-around  w-full items-center">
        <view v-for="item in pathList">
            <view @click="item.to" class="text-center">
                <view :class="Icon(item.icon)" />
                <view> {{ item.text }}</view>
            </view>
        </view>
    </view>
</template>
